
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
	<title>Hierarchical dynamic menu with CSS</title> 
 
<style type="text/css"> 
 
	#menu {		
		list-style:none;
		padding:0;
		margin:63px 0 20px 15px; 
		font:normal 12px Tahoma,sans-serif;	
		position:relative;			
	}
		
	#menu li
	{	
		padding:0;
		margin:0;
		display:inline; 
	}		
	
	#menu li a
	{
		background-color:inherit;
		color:#000000;
		text-decoration:none;
		padding:7px 0;		
	}		
	
	#menu li a:hover
	{	background-color:inherit;
		color:#fff;
		text-decoration:none;
	}		
	
#menu li a span.left
{	background:url(images/tab_off-left.jpg) top left no-repeat #333;
	padding:7px 2px;}
	
#menu li a span.right
{	background:url(images/tab_off-right.jpg) top right no-repeat #333;
	padding:7px 2px;}	

#menu li a span.menuitemS
{
	background-color: #cac9c9;
	padding:7px 2px;
}	

#menu li a:hover span.left
{
	background:url(images/tab_on-left.jpg) top left no-repeat #000;
	padding:7px 2px;
}
	
#menu li a:hover span.right
{
	background:url(images/tab_on-right.jpg) top right no-repeat #000;
	padding:7px 2px;
}	

#menu li a:hover span.menuitemS
{
	background-color: #555957;
	padding:7px 2px;
}	
		
	.menuitem {
		position:absolute; top:10px;
		margin:0; padding:0;
		width:10em; 
		height:2.6em;
		overflow:hidden;
		}
	#mi01 { left:0 }
	#mi02 { left:5.5em }
	#mi03 { left:20em }
 
	.menuitem ul {
		display:block;
		margin: 0; padding:0;
		list-style-type:none;
		}
	.menuitem li { margin:0; padding:0 }
	.submenu li { position:relative }
 
	/* 2-class selector to have higher weight than ".menuitem ul" */
	.submenu .subsubmenu {
		position:absolute; top:0; left:10em;
		width:10em;
		display:none;
		}
 
	.menuitem:hover {
		height:10em;
		overflow:visible;
		}
	.submenu li:hover > .subsubmenu {
		display:block;
		}
 
	#menu a {
		display:block;
		margin:0; padding: 0.2em 0.5em;
		text-align:center;
		text-decoration:none;
		color:white;
		border-top:1px solid white;
		border-left:1px solid white;
		}
	#menu a:hover { background:black }
	.menuitem a { background:red }
	.menuitem ul a { background:green }
	.menuitem ul ul a { background:blue }
	.menuitem ul ul ul a { background:violet }
	.menuitem ul ul ul ul a { background:orange }
 
</style> 
 
</head> 
<body> 
 
 
<ul id="menu"> 
 
	<li class="menuitem" id="mi01"><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Page 4</span><span class="right">&nbsp;</span></a> 
	<ul class="submenu"> 
		<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.1</span><span class="right">&nbsp;</span></a></li> 
		<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2</span><span class="right">&nbsp;</span></a> 
		<ul class="subsubmenu"> 
			<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2.1</span><span class="right">&nbsp;</span></a></li> 
			<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2.2</span><span class="right">&nbsp;</span></a> 
			<ul class="subsubmenu"> 
				<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2.2.1</span><span class="right">&nbsp;</span></a></li> 
				<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2.2.2</span><span class="right">&nbsp;</span></a> 
				<ul class="subsubmenu"> 
					<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2.2.2.1</span><span class="right">&nbsp;</span></a></li> 
					<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2.2.2.2</span><span class="right">&nbsp;</span></a></li> 
					<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2.2.2.3</span><span class="right">&nbsp;</span></a></li> 
					<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2.2.2.4</span><span class="right">&nbsp;</span></a></li> 
				</ul></li> 
				<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2.2.3</span><span class="right">&nbsp;</span></a></li> 
				<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2.2.4</span><span class="right">&nbsp;</span></a></li> 
			</ul></li> 
			<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2.3</span><span class="right">&nbsp;</span></a></li> 
			<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.2.4</span><span class="right">&nbsp;</span></a></li> 
		</ul></li> 
		<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.3</span><span class="right">&nbsp;</span></a></li> 
		<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 1.4</span><span class="right">&nbsp;</span></a></li> 
	</ul></li> 
	<li class="menuitem" id="mi02"><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Page 3</span><span class="right">&nbsp;</span></a>
	<ul class="submenu"> 
		<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 3.1</span><span class="right">&nbsp;</span></a></li> 
		<li><a href="/"><span class="left">&nbsp;</span><span class="menuitemS">Subitem 3.2</span><span class="right">&nbsp;</span></a></li> 
	</ul></li> 
 
</ul> 
 

 
<div id="statistiky"> 
	<img src="http://www.toplist.cz/count.asp?id=45236&amp;logo=2" alt="TOPlist" width="1" height="1" /> 
 
<!-- NAVRCHOLU.cz --> 
<script type="text/javascript"> 
<!--
pxDepth = screen.pixelDepth; if (!(pxDepth>0)) pxDepth = screen.colorDepth; if (!(pxDepth>0)) pxDepth = 0; 
document.write("<img src=\"http://hit.navrcholu.cz/hit?id=00057521;n=1;screenx=" + screen.width + ";screeny=" + screen.height + ";cdepth=" + pxDepth + ";ref=" + escape(top.document.referrer) + "\" width=\"1\" height=\"1\" alt=\"\" />");
// -->
</script> 
<noscript> 
<p><img src="http://hit.navrcholu.cz/hit?id=00057521;n=1" width="1" height="1" alt="" /></p>
</noscript> 
<!-- NAVRCHOLU.cz - konec --> 
</div> 
 
</body> 
</html> 